<template>
  <div>
    <div class="search">
      <el-date-picker
        type="date"
        v-model="time"
        placeholder="选择日期"
        value-format="yyyy-MM-dd"
        clearable
      ></el-date-picker>
      <el-button class="btntable2" @click="getzhibiaolist2">查&nbsp;&nbsp;&nbsp;询</el-button>
    </div>
    <echartsdata3 :namedata="namedata" :zhibiaodata="zhibiaodata" :startvalue="startvalue" :xvalue="xvalue" v-if="alive"></echartsdata3>
  </div>
</template>

<script>
import echartsdata3 from '~/components/ydlecharts.vue'
export default {
  data() {
    return {
       xvalue:[],
       startvalue:'',
      alive: true,
      ts: this.newStore(),
      currentPage: 1,
      pagesize: 10,
      total: 0,
      zhibiaodata: [],
      namedata: [],
      analyzelist: [],
      query: '',
      codeoptions: [],
      paramCodeId2: [],
      paramCodeId: '',
      zhibiaocodearr: [],
      zhibiaocode: '',
      date1: '',
      zhibiao: [],
      date2: '',
      activeName: 'first',
      time: ''
    }
  },
  components: {
    echartsdata3
  },
  created() {
    this.getNowFormatDate()
  },
  methods: {
    getNowFormatDate() {
      var date = new Date()
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      this.time = year + seperator1 + month + seperator1 + strDate
      this.getzhibiaolist2()
    },
    reload() {
      this.alive = false
      this.$nextTick(() => {
        this.alive = true
      })
    },

        getzhibiaolist2() {
      this.namedata = []
      this.zhibiaodata = []
      const req = {
        time: this.time,
        hour_num: '24',
        paramCodeId: '030104'
      }
      this.spost(this.ts, '/data/geteletabzhexian', req).then(ts => {
        let a = []
        this.xvalue=[]
        let res_a = []
        for (let i = 0; i < ts.d.length; i += 1) {
          if (this.xvalue.indexOf(ts.d[i].device_hour) == -1) {
            this.xvalue.push(ts.d[i].device_hour)
          }
          
          if (a.indexOf(ts.d[i].device_name) == -1) {
            a.push(ts.d[i].device_name) 
          }
        }
        this.namedata = a

        for (let i = 0; i < a.length; i++) {
          let b = []
          for (let j = 0; j < ts.d.length; j++) {
            if (ts.d[j].device_name == a[i]) {
              let d = []
              d[0] = ts.d[j].device_hour
              d[1] = Number(ts.d[j].value)
              b.push(d)
            }
          }

          

          let res_j = {
            name: a[i],
            type: 'line',
            data: b
          }
          res_a.push(res_j)
        }
        this.zhibiaodata = res_a

        this.reload()
        // console.log('res_a', res_a)
      })
    },
  }
}
</script>

<style>
.el-time-spinner__item:hover:not(.disabled):not(.active) {
  background: #eaaf4f;
}
.el-cascader-menu,
.el-cascader-menu__item.is-disabled:hover {
  background: #111c3f;
}
.el-cascader-menu__item:focus:not(:active),
.el-cascader-menu__item:hover {
  background: #111c3f;
  color: #23ffff;
}
.el-picker-panel__icon-btn {
  color: #fff;
}
.el-cascader-menus {
  background: #111c3f;
  color: #fff;
}
.el-picker-panel {
  background: #111c3f;
  color: #fff;
  border: 1px solid #233a62;
}
.el-range-editor.is-disabled input {
  background: rgba(12, 58, 108, 0.4);
}
.el-range-editor .el-range-input {
  background: rgba(12, 58, 108, 0.4);
  color: #23ffff;
}
.el-table th,
.el-table tr {
  background: inherit;
}
.el-table td,
.el-table th.is-leaf {
  border: 0;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background: rgba(12, 58, 108, 0.4);
}
.el-range-editor.is-disabled {
  background: rgba(8, 10, 14, 0);
  color: #23ffff;
}
.el-pagination .btn-next,
.el-pagination .btn-prev {
  background: rgba(13, 23, 54, 0.5);
}
.el-pagination button:disabled {
  background: rgba(13, 23, 54, 0.5);
}
.el-pager li {
  background: rgba(13, 23, 54, 0.5);
  border: 1px transparent solid;
  color: #a9bfcc;
  border-image: linear-gradient(to bottom right, #2e5873, #111c3f) 1 10;
}
.el-cascader__label {
  color: #23ffff;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  background-color: #ffae5e;
  color: #333;
}
.el-tabs--border-card > .el-tabs__header {
  background: rgba(8, 10, 14, 0);
}
.el-button:focus,
.el-button:hover {
  background: url('../../static/img/btntable3.png') no-repeat;
  background-size: cover;
  border: 0;
  padding: 15px 37px;
  color: #fff;
}
.el-button {
  border: 0;
}
.el-tabs--border-card {
  background: rgba(32, 44, 81, 0.4);
  border: 0;
}
.el-input__inner {
  background: rgba(8, 10, 14, 0);
  border: 1px transparent solid;
  border-image: linear-gradient(to bottom right, #2e5873, #111c3f) 1 10;
  color: #23ffff;
}
.cell {
  text-align: center;
}
.cell div {
  text-align: center;
}
.search {
  margin-bottom: 10px;
}
</style>
